<template>
  <div
    class="table-card-container animate__animated"
    :class="[visible ? 'animate__fadeIn' : 'animate__fadeOut']"
  >
    <div class="card-table-container">
      <vxe-table
        size="small"
        border="inner"
        ref="xTree"
        align="center"
        height="99%"
        show-overflow
        show-header-overflow
        show-footer-overflow
        :data="tableData"
        :column-config="{ resizable: true }"
        :scroll-y="{ enabled: true }"
        :scroll-x="{ enabled: true }"
        :tree-config="{
          transform: true,
          rowField: 'uuid',
          parentField: 'parentId',
          childrenField: 'childList',
          reserve: true,
        }"
        :edit-rules="validRules"
        :loading="loading"
        :row-config="{ keyField: 'uuid' }"
      >
        <vxe-column type="seq" width="80" title="序号"></vxe-column>
        <vxe-column
          field="name"
          title="任务名称"
          tree-node
          align="left"
          min-width="200"
        >
          <template slot-scope="scope">
            <template v-if="scope.row.$$isEdit">
              <a-input
                v-model="scope.row.name"
                placeholder="请输入"
                :class="[!scope.row.name && 'required']"
                @change="saveRowEvent(scope.row)"
              ></a-input>
            </template>
            <template v-else>
              {{ scope.row.name }}
            </template>
          </template>
        </vxe-column>
        <vxe-column field="duration" title="周期(天)" width="100"> </vxe-column>
        <vxe-column field="planStartTime" title="计划开始时间" width="180">
          <template slot-scope="scope">
            <template v-if="scope.row.$$isEdit">
              <a-date-picker
                style="width: 100%"
                v-model="scope.row.planStartTime"
                format="YYYY-MM-DD"
                valueFormat="YYYY-MM-DD"
                :class="[!scope.row.planStartTime && 'required']"
                @change="startDateChange(scope.row)"
                :disabled-date="disabledStartDate"
                @openChange="openDatePanel(scope.row)"
              />
            </template>
            <template v-else>
              {{ scope.row.planStartTime }}
            </template>
          </template>
        </vxe-column>
        <vxe-column field="planEndTime" title="计划完成时间" width="180">
          <template slot-scope="scope">
            <template v-if="scope.row.$$isEdit">
              <a-date-picker
                style="width: 100%"
                v-model="scope.row.planEndTime"
                format="YYYY-MM-DD"
                valueFormat="YYYY-MM-DD"
                :class="[!scope.row.planEndTime && 'required']"
                @change="endDateDateChange(scope.row)"
                :disabled-date="disabledEndDate"
                @openChange="openDatePanel(scope.row)"
              />
            </template>
            <template v-else>
              {{ scope.row.planEndTime }}
            </template>
          </template>
        </vxe-column>
        <vxe-column field="major" title="关键节点" width="140">
          <template slot-scope="scope">
            <template v-if="scope.row.$$isEdit">
              <a-radio-group
                v-model="scope.row.major"
                @change="saveRowEvent(scope.row)"
              >
                <a-radio :value="1"> 是 </a-radio>
                <a-radio :value="2"> 否 </a-radio>
              </a-radio-group>
            </template>
            <template v-else>
              <span :class="filterMajorClass(scope.row.major)">
                {{ scope.row.major | filterMajorNmae }}
              </span>
            </template>
          </template>
        </vxe-column>
        <vxe-column title="状态" width="140" v-if="versionSource().status == 4">
          <template #default="{ row }">
            <div class="state" :class="[filterStateClass(row)]">
              {{ filterStateName(row) }}
            </div>
          </template>
        </vxe-column>
        <vxe-column title="操作" fixed="right" width="180">
          <template slot-scope="scope">
            <div class="text-button-group">
              <a-button type="link" @click="handleEdit(scope.row, 2)">
                查看
              </a-button>
              <a-button
                type="link"
                @click="handleFillReport(scope.row)"
                v-if="versionSource().status == 4 && scope.row.lastFlag"
                v-action="'fill_' + moduleSource()"
              >
                填报
              </a-button>
              <a-button
                v-if="isSubmit && pageType == 1"
                type="link"
                @click="handleEdit(scope.row, 1)"
                v-action="'edit_' + moduleSource()"
              >
                编辑
              </a-button>
              <a-button
                v-if="isSubmit && pageType == 1"
                class="danger"
                type="link"
                @click="handleDelClick(scope.row)"
                v-action="'edit_' + moduleSource()"
              >
                删除
              </a-button>
            </div>
          </template>
        </vxe-column>
      </vxe-table>
    </div>
    <!-- 编辑 -->
    <editModal
      :visible.sync="editModal.visible"
      :operateType="editModal.type"
      :parameter="editModal.row"
      :key="editModal.key"
    ></editModal>
    <!-- 审批 -->
    <approveModal :visible.sync="approveModal.visible"></approveModal>
    <!-- 审批记录 -->
    <comment-modal ref="commentModal"></comment-modal>
    <!-- 版本管理 -->
    <versionManageModal
      :visible.sync="versionManageModal.visible"
      @versionEditor="handleVersion"
    ></versionManageModal>

    <!-- 导入 -->
    <importModal
      :visible.sync="importModal.visible"
      :operateType="importModal.type"
      @ok="importReset"
    ></importModal>
    <!-- 调整 -->
    <adjustModal
      :visible.sync="adjustModal.visible"
      @ok="handleAdjustModalOk($event)"
      @close="handlAadjustModalClose()"
    ></adjustModal>
    <!-- wbs弹窗 -->
    <wbsModal
      :visible.sync="wbsModal.visible"
      :operateType="wbsModal.type"
      :orgCode="wbsModal.orgCode"
      :wbsCode="wbsModal.wbsCode"
    ></wbsModal>
    <!-- 填报 -->
    <fillReportModal
      :key="fillReportModal.key"
      :visible.sync="fillReportModal.visible"
      :parameter="fillReportModal.row"
    ></fillReportModal>
    <!-- 招采计划-编辑  -->
    <purchaseEditorModal
      :key="purchaseEditorModal.key"
      :visible.sync="purchaseEditorModal.visible"
      :operateType="purchaseEditorModal.type"
      :parameter="purchaseEditorModal.row"
    ></purchaseEditorModal>
    <!-- 招采计划-填报 -->
    <purchaseFillReportModal
      :key="purchaseFillReportModal.key"
      :visible.sync="purchaseFillReportModal.visible"
      :parameter="purchaseFillReportModal.row"
    ></purchaseFillReportModal>
  </div>
</template>

<script>
import moment from "moment";
import { mapGetters } from "vuex";
import {
  downLoadFileByArraybuffer,
  addAttributeByKey,
  getDaysBetween,
  flatTreeData,
  getNowDateStr,
  _getUUID,
} from "@/utils/util";
//编辑
import editModal from "./editModal.vue";
//招采计划-编辑
import purchaseEditorModal from "./purchaseEditorModal.vue";
//审批
import approveModal from "./approveModal.vue";
//审批记录
import commentModal from "@/pages/workflow/oaLeave/comment.vue";
//版本管理
import versionManageModal from "./versionManageModal.vue";
//导入
import importModal from "./importModal.vue";
//调整
import adjustModal from "./adjustModal.vue";
//分部分项
import wbsModal from "./wbsModal.vue";
//填报
import fillReportModal from "./fillReportModal.vue";
//招采计划-填报
import purchaseFillReportModal from "./purchaseFillReportModal.vue";

import {
  getListByParentIdDraft,
  getListByParentIdHistory,
  getListByParentIdTable,
  submitVersion,
  exportPlanControl,
  publishVersion,
  publishChildVersion,
  savePlanControl,
  updateVserionStatus,
  downloadPlanControlTemplate,
  deletePlanControlTask,
} from "@/api/progressManage";
import { da } from "date-fns/locale";
export default {
  components: {
    editModal,
    approveModal,
    versionManageModal,
    importModal,
    adjustModal,
    wbsModal,
    fillReportModal,
    commentModal,
    purchaseEditorModal,
    purchaseFillReportModal,
  },
  inject: [
    "moduleSource",
    "versionSource",
    "treeItemSource",
    "firstIndex",
    "conditionsSource",
  ],
  props: {
    visible: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      loading: false,
      tableData: [],
      validRules: {
        name: [{ required: true, message: "请输入" }],
        planStartTime: [{ required: true, message: "请选择" }],
        planEndTime: [{ required: true, message: "请选择" }],
        major: [{ required: true, message: "请输入" }],
      },
      //编辑
      editModal: {
        visible: false,
        type: 1,
        row: {},
        key: _getUUID(),
      },
      //审批
      approveModal: {
        visible: false,
      },
      //版本管理
      versionManageModal: {
        visible: false,
      },
      //导入
      importModal: {
        visible: false,
        type: 1,
      },
      //提交
      submitLoading: false,
      //发布
      releaseLoading: false,
      //调整
      adjustModal: {
        visible: false,
        isOperate: false,
        loading: false,
      },
      //改变的rows
      changData: [],
      currentRow: {},
      //展开/折叠
      swap: false,
      //页面类型
      pageType: null,
      isModal: false,
      //分部分项
      wbsModal: {
        visible: false,
        orgCode: "",
        type: 2,
        wbsCode: "",
      },
      wsInstance: null,
      pageModule: "",
      //填报
      fillReportModal: {
        key: _getUUID(),
        visible: false,
        row: {},
      },
      //招采计划-编辑
      purchaseEditorModal: {
        key: _getUUID(),
        visible: false,
        type: 1,
        row: {},
      },
      //招采计划-填报
      purchaseFillReportModal: {
        key: _getUUID(),
        visible: false,
        row: {},
      },
    };
  },
  filters: {
    //校验关键节点
    filterMajorNmae(val) {
      switch (Number(val)) {
        case 1:
          return "是";

        case 2:
          return "否";

        default:
          return "";
      }
    },
  },
  computed: {
    ...mapGetters(["currentMenu", "userInfo"]),

    //【提交】【编辑】权限
    isSubmit() {
      if (
        (this.versionSource().status == -1 ||
          this.versionSource().status == 0 ||
          this.versionSource().status == 3) &&
        this.versionSource().submitFlag
      ) {
        return true;
      } else {
        return false;
      }
    },

    //审批记录权限
    isRecord() {
      if (
        this.versionSource().status &&
        this.versionSource().status != 0 &&
        this.versionSource().status != 4
      ) {
        return true;
      } else {
        return false;
      }
    },
    //菜单名称
    menuName() {
      let { title } = this.$route.meta;
      return title;
    },
    //子系统不展示
    jsubsystem() {
      if (this.moduleSource() == "scheduleType.01") {
        return true;
      } else {
        return false;
      }
    },
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
        }
      },
      immediate: true,
    },
  },
  mounted() {},
  methods: {
    getListByParentIdTable,
    getListByParentIdDraft,
    getListByParentIdHistory,
    getPageFlag() {
      let { module } = this.$route.query;
      this.pageModule = module;
    },

    //填报
    handleFillReport(row) {
      this.fillReportModal.key = _getUUID();
      this.fillReportModal.row = row;
      this.fillReportModal.visible = true;

      //   let { moduleSource } = this;
      //   switch (moduleSource()) {
      //     //招采计划
      //     case "scheduleType.03":
      //       this.purchaseFillReportModal.key = _getUUID();
      //       this.purchaseFillReportModal.row = row;
      //       this.purchaseFillReportModal.visible = true;
      //       break;
      //     default:
      //       this.fillReportModal.row = row;
      //       this.fillReportModal.visible = true;
      //       break;
      //   }
    },

    //删除
    handleDelClick(row) {
      let that = this;
      that.$confirm({
        title: "提示",
        content: "确定删除该数据吗？删除之后不可恢复！",
        okText: "确定",
        cancelText: "取消",
        icon: () =>
          that.$createElement("a-icon", {
            props: {
              key: "warning",
              type: "exclamation-circle",
              twoToneColor: "#faad14",
            },
          }),
        onOk() {
          deletePlanControlTask({ uuid: row.uuid, proCode: row.proCode })
            .then((res) => {
              if (res.statusCode === 200 || res === 1) {
                that.$message.success("删除成功", 1.5);
                that.getData();
              } else {
                that.$message.error(res.message);
              }
            })
            .catch((_) => {});
        },
      });
    },

    //编辑
    handleEdit(row, type) {
      this.editModal.key = _getUUID();
      this.editModal.row = row;
      this.editModal.type = type;
      this.editModal.visible = true;

      //   let { moduleSource } = this;
      //   switch (moduleSource()) {
      //     //招采计划
      //     case "scheduleType.03":
      //       this.purchaseEditorModal.key = _getUUID();
      //       this.purchaseEditorModal.row = row;
      //       this.purchaseEditorModal.type = type;
      //       this.purchaseEditorModal.visible = true;
      //       break;
      //     default:
      //       break;
      //   }
    },

    //审批
    handleApprove() {
      this.approveModal.visible = true;
    },

    //版本管理
    handleVersionManage() {
      this.versionManageModal.visible = true;
    },

    //审批记录
    handleApprovalRecord() {
      let { uuid } = this.versionSource();
      this.$refs.commentModal.getCommentList(uuid);
    },

    //导入
    handleImport(type) {
      this.importModal.type = type;
      this.importModal.visible = true;
    },

    //模版下载
    handleTemplate(info) {
      let { key } = info;
      downloadPlanControlTemplate({ type: key })
        .then((data) => {
          if (key == 1) {
            downLoadFileByArraybuffer(data, this.menuName + ".xlsx");
          }
          if (key == 2) {
            downLoadFileByArraybuffer(data, this.menuName + ".mpp");
          }
        })
        .catch((_) => {});
    },

    //调整
    handleAdjust() {
      this.pageType = null;
      this.adjustModal.visible = true;
    },

    //分部分项
    handleWbs(row) {
      this.wbsModal.type = 2;
      this.wbsModal.orgCode = row.orgCode;
      this.wbsModal.wbsCode = row.wbsQuery;
      this.wbsModal.visible = true;
    },

    //导出
    handleExport(info) {
      let { key } = info;
      let { tenantCode } = this.conditionsSource();
      let { pageModule } = this;
      this.$message.info("导出文件耗时较长，请耐心等待");
      exportPlanControl(
        {
          proCode: tenantCode,
          orgCode: "",
          type: key,
          versionId: this.versionSource()?.uuid ?? "",
          nodeType: this.moduleSource(),
        },
        pageModule == "nb" ? "exportDataByTypeBeam" : "exportDataByType"
      )
        .then((data) => {
          if (key == 1) {
            downLoadFileByArraybuffer(data, this.menuName + ".xlsx");
          }
          if (key == 2) {
            downLoadFileByArraybuffer(data, this.menuName + ".xml");
          }
        })
        .catch((_) => {});
    },
    //提交
    handleSubmit() {
      let that = this;
      let { uuid } = that.versionSource();
      let { tenantCode } = that.conditionsSource();
      const h = this.$createElement;
      this.$confirm({
        title: "您确定提交所选内容?",
        content: "",
        okText: "确定",
        okType: "primary",
        cancelText: "取消",
        centered: true,
        icon: () =>
          h("a-icon", {
            props: {
              type: "question-circle",
              theme: "filled",
            },
            style: "color:#FAAD14",
          }),
        onOk() {
          that.submitLoading = true;
          submitVersion({ uuid, proCode: tenantCode })
            .then((res) => {
              if (res.statusCode === 200 || res === 1) {
                that.$message.success("提交成功", 1.5);
                that.firstIndex().getVersionData();
                that.$parent.resetButtonGroup();
                that.adjustModal.isOperate = false;
                that.pageType = null;
              } else {
                that.$message.error(res?.message ?? "提交失败");
              }
            })
            .finally(() => {
              that.submitLoading = false;
            });
        },
        onCancel() {},
      });
    },
    publishChildVersion,
    publishVersion,
    //发布
    handleRelease() {
      let that = this;
      let { uuid, proCode } = this.versionSource();
      const h = this.$createElement;
      this.$confirm({
        title: "您确定发布当前版本吗?",
        content: "",
        okText: "确定",
        okType: "primary",
        cancelText: "取消",
        centered: true,
        icon: () =>
          h("a-icon", {
            props: {
              type: "question-circle",
              theme: "filled",
            },
            style: "color:#FAAD14",
          }),
        onOk() {
          that.releaseLoading = true;
          that.$message.info("版本正在发布中，请耐心等待，请勿刷新页面");
          let url = "";
          if (that.moduleSource() == "scheduleType.01") {
            url = "publishVersion";
          } else {
            url = "publishChildVersion";
          }
          that[url]({ uuid, proCode, type: that.moduleSource() })
            .then((res) => {
              if (res.statusCode === 200 || res === 1) {
                that.$message.success("发布成功", 1.5);
                that.firstIndex().getVersionData();
              } else {
                that.$message.error(res?.message ?? "发布失败");
              }
            })
            .finally(() => {
              that.releaseLoading = false;
            });
        },
        onCancel() {},
      });
    },
    //展开/折叠
    handleSwap() {
      this.swap = !this.swap;
      this.$refs.xTree.setAllTreeExpand(this.swap);
    },
    //查询列表
    getData() {
      this.loading = true;
      let { tenantCode, orgCode, name, defaultTime } = this.conditionsSource();
      let { uuid = "", status = "" } = this.versionSource();
      let apiUrl = "";
      if (status == 4) {
        //正式
        apiUrl = "getListByParentIdTable";
      } else if (status == 5) {
        //历史
        apiUrl = "getListByParentIdHistory";
      } else {
        //草稿
        apiUrl = "getListByParentIdDraft";
      }
      this[apiUrl]({
        showAll: 1,
        versionId: uuid,
        parentId: this.treeItemSource()?.uuid ?? "",
        proCode: tenantCode,
        orgCode,
        name,
        startDate: defaultTime?.[0] ?? "",
        endDate: defaultTime?.[1] ?? "",
      })
        .then((res) => {
          this.tableData = res.data?.dataList ?? [];
          //   this.tableData.forEach((v) => {
          //     this.$set(v, "$$isEdit", this.adjustModal.isOperate);
          //   });
          this.changData.length > 0 &&
            this.dealWithData(this.tableData, this.changData);
        })
        .catch(() => {
          this.tableData = [];
        })
        .finally(() => {
          this.loading = false;
          this.swap = false;
        });
    },
    dealWithData(data, changData) {
      for (let i = 0; i < data.length; i++) {
        changData.forEach((item) => {
          if (data[i].uuid == item.uuid) {
            data[i].name = item.name;
            data[i].duration = item.duration;
            data[i].planStartTime = item.planStartTime;
            data[i].planEndTime = item.planEndTime;
            data[i].major = item.major;
            data[i].code = item.code;
          }
        });
      }
    },

    //导入成功，清楚缓存数据
    importReset() {
      this.changData = [];
    },

    //版本管理-1编辑/2查看
    handleVersion(data) {
      let { operate } = data;
      this.isModal = true;
      this.pageType = operate;
      this.$emit("versionEditor", { ...data });
    },

    //返回
    goBack() {
      if (this.isModal) {
        this.versionManageModal.visible = true;
      }
      this.firstIndex().getVersionData();
      this.firstIndex().resetButtonGroup();
      this.pageType = null;
      this.isModal = false;
    },

    //调整确定事件
    handleAdjustModalOk(data) {
      this.pageType = 1;
      this.isModal = false;
      this.$emit("ok", data);
    },

    //版本弹窗关闭
    handlAadjustModalClose() {},

    //取消
    handleCancel() {
      this.changData = [];
      if (this.pageType) {
        this.goBack();
      } else {
        //刷新整个页面数据
        this.firstIndex().getVersionData();
      }
    },

    //确定
    async handleDefine() {
      let { changData, tableData } = this;
      //导入，不做变更
      if (changData.length == 0) {
        this.changData = this.pushUniqueElement(this.changData, tableData[0]);
      }
      try {
        changData.forEach((item) => {
          if (!item.name) {
            throw "任务名称必填";
          } else if (!item.planStartTime) {
            throw "计划开始时间必填";
          } else if (!item.planEndTime) {
            throw "计划结束时间必填";
          }
        });
      } catch (data) {
        return this.$message.error(data);
      }
      let formList = [];
      let { tenantCode } = this.conditionsSource();
      changData.forEach((v) => {
        formList.push({
          uuid: v.uuid,
          //任务名称
          name: v.name,
          //工期
          duration: v.duration,
          //计划开始时间
          planStartTime: v.planStartTime,
          //计划结束时间
          planEndTime: v.planEndTime,
          //关键节点
          major: v.major,
          code: v.code,
          //wbs
          wbsId: v.wbsId,
          wbsName: v.wbsName,
          wbsQuery: v.wbsQuery,
        });
      });
      this.adjustModal.loading = true;
      savePlanControl({ proCode: tenantCode, dataList: formList })
        .then((res) => {
          if (res.statusCode === 200 || res === 1) {
            this.$message.success("提交版本成功", 1.5);
            this.adjustModal.isOperate = false;
            this.changData = [];
            if (this.pageType) {
              this.goBack();
            } else {
            }
            //刷新整个页面数据
            this.firstIndex().getVersionData();
          } else {
            this.$message.error(res?.message ?? "操作失败");
          }
        })
        .catch((_) => {})
        .finally(() => {
          this.adjustModal.loading = false;
        });
    },

    dealWithEdit(data) {
      for (let i = 0; i < data.length; i++) {
        this.$set(data[i], "$$isEdit", true);
        if (data[i].childList && data[i].childList.length > 0) {
          this.dealWithEdit(data[i].childList);
        }
      }
    },

    //tabs切换 记录当前状态
    setPage() {
      this.isModal = true;
      this.adjustModal.isOperate = false;
      this.pageType = 2;
    },

    //记录改变的行数
    saveRowEvent(row) {
      this.changData = this.pushUniqueElement(this.changData, row);
    },

    pushUniqueElement(array, newElement) {
      // 如果数组中已经有相同id的元素，先移除它
      const existingElement = array.find((el) => el.uuid === newElement.uuid);
      if (existingElement) {
        array.splice(array.indexOf(existingElement), 1); // 移除旧元素
      }
      // 将新元素添加到数组中
      array.push(newElement);
      return array;
    },

    //开始时间
    startDateChange(row) {
      let dyas = getDaysBetween(row.planStartTime, row.planEndTime);
      if (dyas) row.duration = dyas;
      this.changData = this.pushUniqueElement(this.changData, row);
    },

    //结束时间
    endDateDateChange(row) {
      let dyas = getDaysBetween(row.planStartTime, row.planEndTime);
      if (dyas) row.duration = dyas;
      this.changData = this.pushUniqueElement(this.changData, row);
    },

    // 弹出日历和关闭日历的回调
    openDatePanel(row) {
      this.currentRow = row;
    },

    disabledStartDate(current) {
      let startTime = moment(this.currentRow.planEndTime).valueOf();
      let currentTime = current.valueOf();
      return currentTime > startTime;
    },

    disabledEndDate(current) {
      let endTime = moment(this.currentRow.planStartTime).valueOf();
      let currentTime = current.valueOf();
      return currentTime < endTime;
    },

    filterMajorClass(val) {
      switch (Number(val)) {
        case 1:
          return "correct";

        case 2:
          return "deny";

        default:
          return "";
      }
    },
    clearData() {
      this.tableData = [];
    },

    filterStateName(row = {}) {
      let { status = 0 } = row?.scheduleItemFill ?? {};
      switch (Number(status)) {
        case 0:
          return "未开始";
        case 1:
          return "提前完成";
        case 2:
          return "正常完成";
        case 3:
          return "延期完成";
        default:
          return "未开始";
      }
    },
    filterStateClass(row = {}) {
      let { status = 0 } = row?.scheduleItemFill ?? {};
      switch (Number(status)) {
        case 0:
          return "default";
        case 1:
          return "lock";
        case 2:
          return "ing";
        case 3:
          return "error";
        default:
          return "default";
      }
    },
  },
  destroyed() {},
  beforeDestroy() {},
};
</script>

<style lang="less" scoped>
.table-card-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  .card-header-container {
    flex-shrink: 0;
    height: 46px;
    display: flex;
    align-items: center;
    padding: 0 20px 0 30px;
    align-items: center;
    justify-content: space-between;
    color: #333333;
    font-size: 16px;
    position: relative;
    /deep/.anticon-swap {
      transform: rotate(90deg);
    }
    .pending {
      display: inline-block;
      height: 8px;
      width: 8px;
      border-radius: 50%;
      background: #f45353;
      position: absolute;
      top: 2px;
      right: 2px;
    }
    /deep/.ant-btn {
      margin-right: 12px;
      &:last-of-type {
        margin-right: 0;
      }
    }
  }
  .card-table-container {
    flex: 1;
    .correct {
      color: #4bc964;
    }
    .deny {
      color: #ff3f4a;
    }
    .required {
      border-color: #ff4d4f;
      /deep/.ant-input {
        border-color: #ff4d4f;
      }
    }

    .state {
      &::before {
        position: relative;
        display: inline-block;
        content: "";
        width: 8px;
        height: 8px;
        background: #239b53;
        border-radius: 0px 0px 0px 0px;
        border-radius: 50%;
        margin-right: 10px;
      }
      &.default {
        &::before {
          background: #8c8c8c;
        }
      }
      &.ing {
        &::before {
          background: #1677ff;
        }
      }
      &.lock {
        &::before {
          background: #249b54;
        }
      }

      &.error {
        &::before {
          background: #ff2d2d;
        }
      }
    }
  }
}
</style>
